@lightspeed/cirrus-icon

Icon

Icon Component

Installation

First, make sure you have been through the Getting Started steps of adding Cirrus in your application.

If using Yarn:

yarn add @lightspeed/cirrus-icon

Or using npm:

npm i -S @lightspeed/cirrus-icon

Contributing

Icons as React components are automatically generated with a build script. To see changes when adding/updating an icon, add your .svg in the svg folder, navigate to this directory in the terminal, and run this command to re-generate the build:

yarn generate-icons

This script will generate the React components and the Icon sprite.

Note that this command will be run automatically when in local development and when we publish to npm.

Designing icons

All our new icons are based on our Cirrus style.

The Sketch file for these icons can be found in the Icons & Illustrations Abstract project.

This is the only style we will use for our system iconography

---

Exporting icons (as designers)

All icons should be exported from the Cirrus Icons.sketch file of the Cirrus repository in Abstract. Exporting should be done from the Slices in each of the icons (on the Symbols page), and not the Symbol Artboards.

Before exporting try to flatten out shapes as much as possible, the fewer shapes you have in place the better the icon will perform, also try to limit the number of anchor points inside your shapes.

If an Icon contains details-1, paths overlapping base-1 should be also be cut out (using the Sketch Layer -> Combine -> Subtract command).

When adding new SVGs make sure it has the following rules are applied:

1. All paths live inside a group with the icon name inside the id in lowercase
2. Sketch layers are called either "base-1", "base-2", "details-1" or "details-2"
3. details-1 paths have no fill property in Sketch
4. details-2 paths have a "#fff" white fill
5. base-2 and details-2 have opacity of 70%
6. Export the SVG (via the Export button, or by selecting the slice for the icon to be exported)
7. Save the Sketch-generated SVGs to the svg/ folder.

When a new .svg is added, a pre-commit hook will automatically take care of cleaning svg files for consumption by Cirrus. There is no need to manually alter svg files once they've been added or committed.

Usage

Import required styles in your .scss:

@import '@lightspeed/cirrus-icon/Icon.scss';

React Component

Props

Color properties can be any Cirrus color token, ex green-100 or any CSS value.

Prop	Type	Description
className	string	Custom className to add in addition to the default ones
name	string	Name of the icon
size	string	Default 1rem, can be set to any custom value
color	string	Applied on the svg fill property
baseColor	string	Applied on the base paths fill property
baseColor1	string	Applied on the base-1 path fill property
baseColor2	string	Applied on the base-2 path fill property
detailsColor	string	Applied on the details paths fill property
detailsColor1	string	Applied on the details-1 path fill property
detailsColor2	string	Applied on the details-2 path fill property

Example

import React from 'react';
import Icon from '@lightspeed/cirrus-icon';

const MyComponent = () =>
  <div>
    <Icon name="settings" />
  </div>;

export default MyComponent;

CSS Component

To use the CSS component, you first need to inline the icon-sprite.svg content in your HTML, and then reference the icons like this:

<svg class="cr-icon cr-icon-add">
  <use xlink:href="#cr-icon-add" />
</svg>

You can also customize the fill properties with CSS Variables, for example with the above HTML:

.cr-icon-add {
  --cr-icon-base-1-fill: $cr-maple;
  --cr-icon-details-1-fill: $cr-maple-300;
}

The following variables are available depending on the level of details for a given icon:

• --cr-icon-base-1-fill
• --cr-icon-base-2-fill
• --cr-icon-details-1-fill
• --cr-icon-details-2-fill

with the corresponding utility classes:

• .cr-icon-base-1-{color}-{value}
• .cr-icon-base-2-{color}-{value}
• .cr-icon-details-1-{color}-{value}
• .cr-icon-details-2-{color}-{value}

For example:

<span class="cr-icon-base-1-maple cr-icon-base-2-maple-300 cr-icon-details-1-snow cr-icon-details-2-snow">
  <svg class="cr-icon cr-icon-add">
    <use xlink:href="#cr-icon-add" />
  </svg>
</span>

This will take care of setting the variables for you.

Look at the Sprite Story for more information.